<template>
  <el-aside width="200px">
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      text-color="#fff"
      router
    >
      <div class="s1">
        
        <img
          src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
          alt=""
        />
        <h1 class="logo-title" data-v-afbec1f4="">imooc-admin</h1>
      </div>
      <el-menu-item>
        <!-- <el-icon><icon-menu /></el-icon> -->
          <el-icon><icon-menu /></el-icon>

        <span @click="$router.push('/profile')">个人中心</span>
      </el-menu-item>
      <el-menu-item>
        <!-- <el-icon><icon-menu /></el-icon> -->
          <el-icon><icon-menu /></el-icon>

        <span @click="$router.push('/chart')">数据可视化</span>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>用户</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="$router.push('/manage')">员工管理</el-menu-item>
          <el-menu-item index="1-2" @click="$router.push('/role')">角色管理</el-menu-item>
          <el-menu-item index="1-2" @click="$router.push('/permission')">权限管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>文章</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="$router.push('/ranking')">文章排名</el-menu-item>
          <el-menu-item index="1-2" @click="$router.push('/create')">创建文章</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { getCurrentInstance, activated } from "vue";
import { getListdata } from "@/api/login";
const { proxy } = getCurrentInstance();

// const data = activated({
//   list: [],
// });

// //请求数据
// const getdatalistt = async () => {
//   let res = await getListdata();
//   console.log(res.data.permission.menus, "2");
//   proxy.list = res.data.permission.menus;
// };
// getdatalistt();
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
}
.el-aside {
  height: 100%;
  .s1 {
    display: flex;
    h1 {
      margin-left: 10px;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 16px;
      white-space: nowrap;
    }
  }
  img {
    width: 44px;
    height: 44px;
    background-color: #545c64;
    margin-left: 25px;
    margin-top: 10px;
  }
}
</style>